
<template>
  <div class="feedback-box">
    <!--界面导航条信息-->
    <van-nav-bar title="留言" left-text="" left-arrow @click-left="onClickLeft" class="nav-bar" :class="[iosFlag]"/>

    <div class="title">
      <!-- <p> 水云踪App是一个快速发展，快速迭代的软件工具，需要大家的支持和帮助。如果您在使用中有什么疑问，或者有什么建议，请在下面填写。感谢您的支持。</p> -->


      <div class="upload-msg">
        <van-field
          v-model="title"
          label="标题"
          placeholder="请输入标题"
          class="upload-title"
        />
        <textarea v-model="describe" placeholder="请输入内容"></textarea>
      </div>

      <van-button type="primary" size="normal" class="button-save" @click="clickToFeedback">反馈</van-button>
    </div>


    <!-- <div class="fixed" :class="[loadFlag]"></div> -->
    <!-- <div class="spinner-content" :class="[loadFlag]">
      <van-loading class="date-loader" type="spinner" color="black" />
    </div> -->

    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
      class="feedback-list"
      :immediate-check="false"
    >
      <div
        v-for="(item, index) in list"
        :key="index"
        class="feedback-item"
      >
        <h3 class="feed-title">{{ item.title }}</h3>
        <p class="feed-desc">{{ item.desc }}</p>
        <p class="feed-time">{{ item.date }}</p>
        <p class="feed-status">{{ item.status == '1' ? '已完成' : '处理中' }}</p>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Toast } from 'vant';
  export default {
    name: "help-feedback",
    data() {
      return {
        iosFlag:null,
        param_userid:null,
        param_type:null,
        param_version:null,
        describe:"",
        title: "",
        loadFlag:null,
        list: [],
        loading: false,
        finished: false,
        pageCount: 10,
        pageIndex: 0
      }
    },
    mounted(){
      token_g = JSON.parse(sessionStorage.getItem("usermessage")).token

      // 获取用户反馈信息
      this.getFeedbackStatus()

      // this.ismobile(1);
      // 键盘弹出遮挡问题
      if(/Android [4-6]/.test(navigator.appVersion)) {
        window.addEventListener("resize", function() {
          if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
            window.setTimeout(function() {
              document.activeElement.scrollIntoViewIfNeeded();
            },400);
          }
        })
      }
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      //点击触发反馈按钮
      clickToFeedback(){
        if(this.title){
          this.$axios({
            method: 'POST',
            url: url_g + '/feedback/',
            data:{
              status: '0',
              title: this.title,
              desc: this.describe
            },
            headers: {
              'Authorization': 'Bearer ' + token_g
            }
          }).then((res) => {
            console.log(res)
            if(res.data) {
              Toast.success('成功留言');
            }
          }).catch((e) => {
            console.error('GET err:' + e);
          });
        }else{
           Toast('请输入标题后进行反馈');
        }
      },
      getFeedbackStatus() {
        let params = {}
        if(this.pageIndex != 0) {
          params.page = this.pageIndex + 1
        }
        this.$axios({
          method: 'GET',
          url: url_g + '/feedback/',
          params: params,
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          console.log(res)
          if(res.data) {
            let newArr = res.data.results
            this.pageCount = res.data.count

            for (let i = 0; i < newArr.length; i ++) {
              newArr[i].date = this.formatDateTime(newArr[i].created_on)
              this.list.push(newArr[i])
            }

            this.loading = false
            if (this.list.length >= this.pageCount) {
              this.finished = true
            }
          }
        }).catch((e) => {
          console.error('GET err:' + e);
        });
      },
      onLoad() {
        // 异步更新数据
        setTimeout(() => {
          this.pageIndex ++
          this.getFeedbackStatus()
        }, 500);
      },
      //移动端适配-首页顶部标题栏
      ismobile(test){
        var u = navigator.userAgent, app = navigator.appVersion;
        if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
          if(window.location.href.indexOf("?mobile")<0){
            try{
              if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){
                // this.iosFlag = 'ddisplay';
                document.getElementsByClassName("van-tabbar")[0].style = {};
                document.getElementsByClassName("van-tabbar")[0].style.display = "none";
                this.iosFlag = '';
              }else{
                this.iosFlag = ' ';
              }
            }catch(e){
            }
          }
        }else if( u.indexOf('iPad') > -1){
          //this.iosFlag = 'ddisplay';
          document.getElementsByClassName("van-tabbar")[0].style = {};
          document.getElementsByClassName("van-tabbar")[0].style.display = "none";
        }else{
          this.iosFlag = ' ';

        }
      },

      //获取手机唯一标志符
      uuid() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";

        var uuid = s.join("");

        return uuid;
      },
      formatDateTime (date) {
        let time = new Date(Date.parse(date));
        // if (!isNaN(time)) {
        //     return new Date(Date.parse(date.replace(/-/g, "/")));
        // } else {
        let Y = time.getFullYear() + '-';
        let M = this.addZero(time.getMonth() + 1) + '-';
        let D = this.addZero(time.getDate()) + ' ';
        let h = this.addZero(time.getHours()) + ':';
        let m = this.addZero(time.getMinutes()) + ':';
        let s = this.addZero(time.getSeconds());
        return Y + M + D + h + m + s;
        // }
      },
      // 数字补0操作
      addZero(num) {
        return num < 10 ? '0' + num : num;
      },
    }
  }
</script>

<style scoped>
/*修改placeholder样式*/
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #ccc;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #ccc;
}
input::-moz-placeholder, textarea::-moz-placeholder {
  color: #ccc;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #ccc;
}
.feedback-box {
  height: 100vh;
  background-color: #f5f5f5;
  overflow: auto;
}
  .upload-msg {
    width: 93.8%;
    padding: 20px 0;
    margin: 0 auto;
    height: 148px;
  }
  .upload-msg textarea{
    width:94%;
    height:100%;
    background-color:#fff;
    display: block;
    overflow:hidden;
    resize:none;
    border:none;
    border-radius:5px;
    -webkit-border-radius:5px;
    padding: 3% !important;
    line-height:24px;
    font-size: 14px;
    overflow-y: auto;
  }
  p{
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: #333;
  }
  h3 {
    margin: 0;
  }
  .title{
    padding: 20px;
  }
  .ddisplay{
    display: none;
  }
  button {
    display: block;
    width: calc(100% - 24px);
    height: 49px;
    background-color: #025596;
    border: 0;
    border-radius: 4px;
    margin: auto;
    margin-top: 65px;
    font-size: 15px;
    line-height: 21px;
    color: #fff;
  }
  .van-loading {
    margin: -150px auto 0 auto !important;
  }
  .van-pull-refresh{
    width: 100% !important;
    height: 100% !important;
  }
  .fixed{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0,0,0,.1);
  }
  .loadFlag{
    display: block !important;
  }
  .fixed{
    display: none ;
  }
  .spinner-content{
    display: none;
  }
  .upload-title {
    border-radius: 5px;
    margin-bottom: 10px;
  }
  .feedback-list {
    padding: 0 10px;
  }
  .feedback-item {
    background-color: #fff;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  .feed-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
  }
  .feed-desc {
    font-size: 14px;
    color: #333;
    line-height: 24px;
    margin: 5px 0;
  }
  .feed-time {
    font-size: 12px;
  }
  .feed-status {
    font-size: 12px;
    text-align: right;
  }
</style>
